<template>
  <transition name="moveL1"
    >   
    <!-- 绑定style中top和left-->
    <div class="moveBox" ref="moveBoxScale" :style="mystyle" v-show="show">
      <div class="moveHead" v-drag></div>
      <!--  关闭按钮-->
      <div class="close" @click="toggleShow(false)">×</div>
      <div
        class="sharedlink"
        @click="sharedlinkurl"
        v-show="selectIssueId != '' && !BoxShare"
      >
        <svg
          t="1687938163122"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2672"
          width="200"
          height="200"
        >
          <path
            d="M863.2109375 634.6953125l0 183.8671875c0 31.640625-26.71875 58.18359375-58.18359375 58.18359375l-614.8828125 1.0546875c-31.46484375 0-57.12890625-25.6640625-57.12890625-57.3046875l1.0546875-614.8828125c0-31.46484375 26.71875-58.18359375 58.18359375-58.18359375l340.13671875 0L532.390625 79.75390625 192.25390625 79.75390625c-71.89453125 0-125.68359375 72.7734375-125.68359375 137.8125l0 602.9296875c0 68.203125 55.37109375 123.75 123.75 123.75l602.9296875 0c72.0703125 0 137.63671875-59.94140625 137.63671875-125.68359375L930.88671875 634.6953125 863.2109375 634.6953125 863.2109375 634.6953125zM703.77734375 115.4375l253.65234375 254.1796875L703.77734375 623.62109375l0-145.1953125c0 0-251.71875-27.94921875-398.671875 181.58203125 0 0 46.23046875-399.375 398.671875-399.375L703.77734375 115.4375 703.77734375 115.4375z"
            fill="#ffffff"
            p-id="2673"
          ></path>
        </svg>
      </div>

      <div v-show="BoxIssue" class="issueBtn" @click="changeIssueMarker">
        <el-tooltip
          class="item"
          effect="dark"
          :content="showAllIssueText"
          placement="top"
          :open-delay="400"
        >
          <svg-icon
            v-if="!showAllIssue"
            class="svg_icon"
            icon-class="invisible"
          />
          <svg-icon v-else class="svg_icon" icon-class="visible" />
        </el-tooltip>
      </div>

      <div class="scalebtn" @click="changeIssueImgScale" v-show="BoxScale">
        <svg
          v-if="isSmallWindow === true && BoxScale"
          t="1687938584328"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2678"
          width="200"
          height="200"
        >
          <path
            d="M811.99999971 62h-599.99999942C127.99999971 62 62 127.99999971 62 212.00000029v599.99999942C62 896.00000029 127.99999971 962 212.00000029 962h599.99999942c83.99999971 0 150.00000029-65.99999971 150.00000029-150.00000029v-599.99999942C962 127.99999971 896.00000029 62 811.99999971 62zM901.99999971 811.99999971c0 47.99999971-42.00000029 90-90 90h-599.99999942c-47.99999971 0-90-42.00000029-90-90v-599.99999942C122.00000029 163.99999971 163.99999971 122.00000029 212.00000029 122.00000029h599.99999942c47.99999971 0 90 42.00000029 90 90v599.99999942z"
            fill="#ffffff"
            p-id="2679"
          ></path>
          <path
            d="M415.99999971 566L242 739.99999971V631.99999971c0-18-11.99999971-29.99999971-29.99999971-29.99999971s-29.99999971 11.99999971-30.00000058 29.99999971v180c0 18 11.99999971 29.99999971 30.00000058 30.00000058h180c18 0 29.99999971-11.99999971 29.99999971-30.00000058s-11.99999971-29.99999971-29.99999971-29.99999971H284.00000029l173.99999971-173.99999971c11.99999971-11.99999971 11.99999971-29.99999971 0-42.00000029-11.99999971-11.99999971-29.99999971-11.99999971-42.00000029 0zM811.99999971 181.99999971h-180c-18 0-29.99999971 11.99999971-29.99999971 30.00000058s11.99999971 29.99999971 29.99999971 29.99999971h108L566 415.99999971c-11.99999971 11.99999971-11.99999971 29.99999971 0 42.00000029 11.99999971 11.99999971 29.99999971 11.99999971 42.00000029 0L782 284.00000029v108c0 18 11.99999971 29.99999971 29.99999971 29.99999971s29.99999971-11.99999971 30.00000058-29.99999971v-180c0-18-11.99999971-29.99999971-30.00000058-30.00000058z"
            fill="#ffffff"
            p-id="2680"
          ></path>
        </svg>
        <svg
          v-if="isSmallWindow === false && BoxScale"
          t="1687941059707"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2967"
          width="200"
          height="200"
        >
          <path
            d="M811.99999971 62h-599.99999942C127.99999971 62 62 127.99999971 62 212.00000029v599.99999942C62 896.00000029 127.99999971 962 212.00000029 962h599.99999942c83.99999971 0 150.00000029-65.99999971 150.00000029-150.00000029v-599.99999942C962 127.99999971 896.00000029 62 811.99999971 62zM901.99999971 811.99999971c0 47.99999971-42.00000029 90-90 90h-599.99999942c-47.99999971 0-90-42.00000029-90-90v-599.99999942C122.00000029 163.99999971 163.99999971 122.00000029 212.00000029 122.00000029h599.99999942c47.99999971 0 90 42.00000029 90 90v599.99999942z"
            fill="#ffffff"
            p-id="2968"
          ></path>
          <path
            d="M775.99999971 206L602 379.99999971V271.99999971c0-18-11.99999971-29.99999971-29.99999971-29.99999971s-29.99999971 11.99999971-30.00000058 29.99999971v180c0 18 11.99999971 29.99999971 30.00000058 30.00000058h180c18 0 29.99999971-11.99999971 29.99999971-30.00000058s-11.99999971-29.99999971-29.99999971-29.99999971H644.00000029l173.99999971-173.99999971c11.99999971-11.99999971 11.99999971-29.99999971 0-42.00000029-11.99999971-11.99999971-29.99999971-11.99999971-42.00000029 0zM451.99999971 541.99999971h-180c-18 0-29.99999971 11.99999971-29.99999971 30.00000058s11.99999971 29.99999971 29.99999971 29.99999971h108l-173.99999971 173.99999971c-11.99999971 11.99999971-11.99999971 29.99999971 0 42.00000029 11.99999971 11.99999971 29.99999971 11.99999971 42.00000029 0L422 644.00000029v108c0 18 11.99999971 29.99999971 29.99999971 29.99999971s29.99999971-11.99999971 30.00000058-29.99999971v-180c0-18-11.99999971-29.99999971-30.00000058-30.00000058z"
            fill="#ffffff"
            p-id="2969"
          ></path>
        </svg>
      </div>

           
      <div class="content" v-if="daxiao">
        <!--插槽-->
               
        <slot></slot>
      </div>
      <div class="bottomMoveHead" v-drag></div>
    </div>
  </transition>
</template>

<script>
export default {
  name: "moveBox",
  data() {
    return {
      show: false, //是否显示
      x: 330, //left:x
      y: 375, //top:y
      leftOffset: 0, //鼠标距离移动窗口左侧偏移量
      topOffset: 0, //鼠标距离移动窗口顶部偏移量
      isMove: false, //是否移动标识
      boxWidth: 700,
      boxHeight: 510,
      selectIssueId: "",
      isSmallWindow: true,
      daxiao: true,
      boxSize: null,
      showAllIssue: false,
    };
  },
  props: [
    "BoxWidth",
    "BoxHeight",
    "BoxTop",
    "BoxRight",
    "BoxShare",
    "BoxScale",
    "MaxSize",
    "BoxIssue",
  ],
  computed: {
    //top与left加上px
    mystyle() {
      if (this.boxSize && this.boxSize.top) {
        return `top:${this.boxSize.top};right:${this.boxSize.right};width:${this.boxSize.width};height:${this.boxSize.height};`;
      }
      //
      if (this.BoxTop && this.BoxRight) {
        var s = `top:${this.BoxTop}px;right:${this.BoxRight}px;`;
      } else {
        var s = `top:${this.y}px;right:${this.x}px;`;
      }
      if (this.BoxWidth && this.BoxHeight) {
        s += `width:${this.BoxWidth}px;height:${this.BoxHeight}px;`;
      } else {
        s += `width:700px;height:510px;`;
      }
      return s;
    },
    showAllIssueText() {
      return this.showAllIssue ? "关闭同类预警" : "查看其余同类预警";
    },
  },
  directives: {
    drag(el, bindings) {
      el.onmousedown = function (e) {
        var disx = e.pageX - el.parentNode.offsetLeft;
        var disy = e.pageY - el.parentNode.offsetTop;
        document.onmousemove = function (e) {
          el.parentNode.style.left = e.pageX - disx + "px";
          el.parentNode.style.top = e.pageY - disy + "px";
        };
        document.onmouseup = function () {
          document.onmousemove = document.onmouseup = null;
        };
        e.stopPropagation();
      };
    },
  },
  components: {},
  mounted() {
    this.showAllIssue = false;
  },
  beforeDestroy() {
    this.boxSize = null;
  },
  created() {
    var _this = this;
    _this.$bus.on("setSelectItemissueId", (code) => {
      console.log("setSelectItemissueId", code);
      _this.selectIssueId = code;
    });
  },
  methods: {
    //     initpoint(){
    //     var _this=this;
    // var moveBoxScale=_this.$refs.moveBoxScale;
    // if(moveBoxScale){
    //   moveBoxScale.style.top='170px';
    //   moveBoxScale.style.right='400px';
    //   moveBoxScale.style.left='auto';
    // }
    //     },
    changeIssueMarker() {
      this.showAllIssue = !this.showAllIssue;
      this.$bus.emit("showAllIssue", this.showAllIssue);
    },
    changeIssueImgScale() {
      var _this = this;

      const moveBoxScale = this.$refs.moveBoxScale;
      if (!moveBoxScale) {
        console.log("报错：moveBox不存在！");
        return false;
      }
      //
      _this.daxiao = false;
      _this.isSmallWindow = !_this.isSmallWindow;
      //
      //
      if (_this.isSmallWindow === false) {
        if (_this.MaxSize) {
          _this.boxSize = _this.setMaxSize(this.MaxSize);
        } else {
          _this.boxSize = _this.setDefaultMaxSize();
        }
      } else if (_this.isSmallWindow === true) {
        if (_this.BoxWidth) {
          _this.boxSize = {
            top: _this.BoxTop + "px",
            right: _this.BoxRight + "px",
            width: _this.BoxWidth + "px",
            height: _this.BoxHeight + "px",
          };
          console.log("moveBoxScale.style.right", moveBoxScale.style.right);
        } else {
          _this.boxSize = {
            top: "300px",
            right: "360px",
            width: "700px",
            height: "510px",
          };
        }
      }
      //
      _this.$bus.emit("changeIssueImgScale", [
        moveBoxScale.clientWidth,
        moveBoxScale.clientHeight,
      ]);
      setTimeout(function () {
        _this.daxiao = true;
        _this.$forceUpdate();
      }, 10);
    },
    setMaxSize(values) {
      console.log("setMaxSize", values);
      return {
        top: values[0],
        left: values[1],
        height: values[2],
        width: values[3],
      };
    },
    setDefaultMaxSize() {
      let width = document.documentElement.clientHeight * (8 / 6);
      if (window.innerWidth - 300 < width) {
        width = window.innerWidth - 300;
      }
      width = width - 20 + "px";
      //
      console.log("setDefaultMaxSize", width);
      return {
        top: "50px",
        right: "355px",
        height: "calc(100% - 80px)",
        width: width,
      };
    },
    //控制打开关闭
    toggleShow(flag) {
      var _this = this;
      _this.show = flag;
      if (!flag) {
        _this.$emit("closePhoto");
      }
      this.showAllIssue = false;
    },
    sharedlinkurl() {
      var _this = this;
      window.open(
        window.location.href +
          "shared2?problemCode=" +
          _this.selectIssueId +
          "&title=" +
          document.title,
        "",
        "height=1080,width=1920, scrollbars=yes,status =yes"
      );
    },
  },
};
</script>
<style scoped lang="scss">
.moveBox {
  width: 700px;
  height: 510px;
  position: fixed;
  box-shadow: 0 0 5px 3px #474c4c;
  background-color: #eeeeee;

  .moveHead {
    height: 30px;
    background-color: #273942;
    cursor: move;
  }

  .bottomMoveHead {
    height: 5px;
    background-color: #344750;
    cursor: move;
  }

  .sharedlink {
    position: absolute;
    top: 7px;
    right: 70px;
    height: 20px;
    width: 20px;
    cursor: pointer;

    svg {
      width: 100%;
      height: 100%;
    }
  }

  .issueBtn {
    position: absolute;
    top: 7px;
    right: 140px;
    height: 20px;
    width: 20px;
    cursor: pointer;

    .svg_icon {
      width: 100%;
      height: 100%;
    }
  }

  .scalebtn {
    position: absolute;
    top: 7px;
    left: 10px;
    height: 20px;
    width: 20px;
    cursor: pointer;

    svg {
      width: 100%;
      height: 100%;
    }
  }

  .close {
    position: absolute;
    right: 8px;
    top: 4px;
    line-height: 20px;
    font-size: 32px;
    cursor: pointer;
    display: block;
    width: 20px;
    height: 20px;
    text-align: center;
  }

  .content {
    padding: 0px;
    width: 100%;
    height: calc(100% - 30px);
  }
}

.moveL1-enter-active,
.moveL1-leave-active {
  transition: all 0.5s ease;
}

.moveL1-enter,
.moveL1-leave-to {
  opacity: 0;
  transform: scale(0.5);
}
</style>
